<template>
    <div>
        <van-uploader
            class="attach-file-upload"
            v-model="uploadstate.file_list"
            :accept="accept"
            max-count="6"
            :after-read="afterRead"
            :upload-icon="uploadIcon"
            :upload-text="uploadText"
            :before-read="beforeRead"
            @delete="afterDel"
            result-type="file"
            multiple>
        </van-uploader>
        <!-- <van-uploader
            class="attach-file-upload"
            v-model="uploadstate.file_list"
            max-count="6"
            :after-read="afterRead"
            upload-icon="back-top"
            upload-text="$st('wp_Upload_Attachment')"
            :before-read="beforeRead"
            @delete="afterDel"
            result-type="file"
            multiple>
        </van-uploader> -->
    </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue';
import { apiService } from '@/api/apiService.js';
import { capiCommonFile } from '@/api/server.js';
import { Toast } from 'vant';
import { selfI18n } from '../../i18n/index';
export default {
    props: {
        modelValue: Array,
        annextype: String,
        id: String,
        accept: String,
        uploadIcon: String,
        uploadText: String
    },

    setup (props) {
        const $st = selfI18n;
        const { modelValue, annextype, id } = toRefs(props);
        // const getAttachUrl = function (attachitem) {
        //     // return `/upload/${attachitem.annextype}/${attachitem.filedir}/${attachitem.serverfilename}`;
        //     return `/upload/${attachitem.annextype || 'pic'}/${attachitem.filedir || '--'}/${attachitem.filename}`;
        // };

        const formatAttachs = (filelist) => {
            if (!filelist) {
                return [];
            }
            return filelist;
        };
        const formatPictureAttachs = (attachitem) => {

        };
        const formatDocumentAttachs = (attachitem) => {

        };

        const uploadstate = reactive({
            file_list: formatAttachs(modelValue.value),
            pictureFileList: formatPictureAttachs(modelValue.value),
            documentFileList: formatDocumentAttachs(modelValue.value),
            annextype,
            id
        });
        watch(modelValue, () => {
            uploadstate.file_list = formatAttachs(modelValue.value || []);
            console.log(uploadstate.file_list);
        });

        const beforeRead = (file) => {
            console.log(annextype.value);
            if (annextype.value === 'picture') {
                // 上传图片支持格式;
                const imgtype = ['jpg', 'png'];
                const itemtype = file.name.lastIndexOf('.');
                const fileext = file.name.substring(itemtype + 1);
                const isimg = imgtype.indexOf(fileext);
                if (isimg < 0) {
                    Toast(selfI18n('wp_Uploading_pictures_only_supports_JPG_and_PNG'));
                    return false;
                } else if (file.size > 10485760) {
                    Toast('上传图片大小不超过10MB');
                    return false;
                } else {
                    return true;
                }
            } else {
                const itemtype = file.name.lastIndexOf('.');
                const fileext = file.name.substring(itemtype + 1);
                const imgtype = ['jpg', 'png'];
                const isimg = imgtype.indexOf(fileext);
                // console.log(file);
                console.log('file');
                console.log(file);
                //         const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
                //   const isLt1M = file.size / 1024 / 1024 < 1;

                if (isimg >= 0) {
                    Toast('上传文件不支持jpg及png格式!');
                    return false;
                } else if (file.size > 52428800) {
                    Toast('上传文件大小不超过50MB');
                    return false;
                } else {
                    return true;
                }
            }
        };
        // const maxSize = (file) => {
        //     // 上传图片支持格式
        //     const imgtype = ['jpg', 'png'];
        //     const isimg = imgtype.indexOf(file.type);
        //     const maxSize = isimg ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
        //     return maxSize;
        // };
        // const onOversize = (file) => {
        //     Toast('文件大小不能超过 500kb');
        // };
        // const isOverSize = (file) => {
        //     return file.size >= maxSize(file);
        // };
        const postUploadAttach = (file, callback) => {
            // {file:File{name:'xxx.jpg',type:'image/jpeg'},message:'',status:''}
            const formdata = new FormData();
            formdata.append('bucketname', 'ncmaintain');
            formdata.append('filename', file.file.name);
            formdata.append('file', file.file);

            apiService({
                api: capiCommonFile,
                param: formdata,
                success: (data) => {
                    file.data = data.value;
                    file.status = 'success';
                    file.url = data.value.fileurl;
                    file.message = $st('wp_Uploaded_successfully');
                    callback && callback();
                },
                fail: data => {
                    console.log('失败');
                    console.log(data);
                },
                error: data => {
                    console.log($st('wp_Error'));
                    console.log(data);
                }
            });
        };

        return {
            postUploadAttach,
            uploadstate,
            beforeRead
        };
    },
    methods: {
        afterRead (file) {
            this.postUploadAttach(file, async () => {
                await this.$nextTick();
                this.$emit('update:modelValue', this.uploadstate.file_list);
            });
        },
        afterDel () {
            this.$emit('update:modelValue', this.uploadstate.file_list);
        },
        getAttachData () {
            return this.uploadstate.file_list;
        }
    }

};
</script>

<style lang="scss">
    .attach-file-upload{
        background: #fff;
        margin: 10px 0;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
    }
    .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>
